<template>
	<view>
		<search-bar :mode="2" button="outside" @search="doSearch" @confirm="doSearch" v-model="keyword"></search-bar>
		<view class="ad-banner" v-if="false"><image src="/static/temp/tbs.jpg" mode="scaleToFill"></image></view>
		<!-- 搜索历史 -->
		<view class="search-section">
			<view class="search-box"><text class="info">搜索历史</text></view>
			<icon-font type="trash" size="22" @tap="clearLSSearch"></icon-font>
		</view>
		<view class="history-content">
			<view v-for="(item, index) in lishisearch" :key="index" class="margin-tb-sm">
				<view class="history-item" @tap="tuijianSearch" :data-text="item">{{ item }}</view>
			</view>
			<view v-for="(item, mindex) in lishisearchMore" :key="mindex" class="margin-tb-sm">
				<view class="history-item" @tap="tuijianSearch" :data-text="item" v-show="moreflg == 1">{{ item }}</view>
			</view>
			<view class="more-item" v-if="moreflg != -1" @tap="showmore">
				{{ searchtext }}
				<icon-font :type="icontype"></icon-font>
			</view>
		</view>
		<!-- 大家都在搜 -->
		<view class="search-section">
			<view class="search-box"><text class="info">大家都在搜</text></view>
		</view>
		<view class="hot-content">
			<view class="margin-tb-sm" v-for="(item, index) in dajiasearch" :key="index">
				<view class="hot-item" @tap="tuijianSearch" :data-text="item">{{ item }}</view>
			</view>
		</view>
		<dialog-box :modalName="modalName" @cancelSearch="cancelSearch" @clearSearch="clearSearch"></dialog-box>
		<search-clipboard :searchModal="searchModal" @resetModal="resetSearchModal"></search-clipboard>
		<tab-bar :current="2"></tab-bar>
	</view>
</template>

<script>
import tabBar from '@/components/tab-bar.vue';
import searchBar from '@/pages/sou/components/search-bar.vue';
var _self;
export default {
	components: {
		tabBar,
		searchBar
	},
	data() {
		return {
			lishisearch: [],
			lishisearchMore: [],
			dajiasearch: [],
			searchtext: '更多搜索历史',
			icontype: 'zhankai',
			moreflg: -1,
			tabIndex: 0,
			modalName: '', //对话框名称
			keyword: '', //搜索关键字
			searchModal: this.$util.initClipboard()
		};
	},
	onLoad(options) {
		_self = this;
		uni.hideTabBar();
		_self.tabIndex = options.type ? options.type : 0;
		_self.getDaJiasearch();
	},
	onShow() {
		_self.loadData();
		setTimeout(() => {
			_self.$util.searchClipboard(_self.$store.state.searchContent).then(res => {
				_self.searchModal = res;
			});
		}, 200);
	},
	methods: {
		resetSearchModal() {
			_self.searchModal = _self.$util.initClipboard();
		},
		loadData() {
			_self.lishisearch = uni.getStorageSync(_self.$store.state.searchTBStorageHistory);
			let len = _self.lishisearch.length;
			if (len > 4) {
				_self.moreflg = 0;
				_self.lishisearchMore = _self.lishisearch.slice(4, len);
				_self.lishisearch.splice(4, len);
			}
		},

		/* 获取推荐热词 */
		getDaJiasearch() {
			try {
				const param = {
					type: 'hot_search'
				};
				_self.$http.httpRequest('advertisement/list', param, false).then(res => {
					if (res._tranStatus) {
						let tmplist = res._data.list;
						tmplist.forEach(item => {
							_self.dajiasearch.push(item.name);
						});
					}
				});
			} catch (e) {
				//console.log('iconList', e);
			}
		},

		//搜索
		doSearch() {
			if (_self.keyword.length > 0) {
				_self.tiaozhuan(_self.keyword);
			}
		},

		/* 点击推荐或者历史记录 */
		tuijianSearch(e) {
			_self.tiaozhuan(e.target.dataset.text);
		},

		/* 搜索标题,跳转至搜索列表 */
		tiaozhuan(text) {
			if (text) {
				_self.$util.setSearchHistory(text, _self.$store.state.searchTBStorageHistory);
				uni.navigateTo({
					url: 'list?cnt=' + encodeURIComponent(JSON.stringify(text))
				});
			}
		},

		/* 显示更多历史记录 */
		showmore() {
			if (_self.moreflg == 0) {
				_self.moreflg = 1;
				_self.searchtext = '收起搜索历史';
				_self.icontype = 'shouqi';
			} else {
				_self.moreflg = 0;
				_self.searchtext = '更多搜索历史';
				_self.icontype = 'zhankai';
			}
		},
		/*清理历史搜索数据*/
		clearLSSearch() {
			_self.modalName = 'lssearch';
		},
		cancelSearch() {
			//暂不清除历史记录
			_self.modalName = '';
		},
		clearSearch() {
			//确认清除历史记录
			_self.modalName = '';
			_self.lishisearch = [];
			_self.lishisearchMore = [];
			_self.moreflg = -1;
			uni.removeStorageSync(_self.$store.state.searchTBStorageHistory);
		}
	}
};
</script>

<style lang="scss">
/* 搜索历史和推荐说明 */
.search-section {
	display: flex;
	align-items: center;
	height: 90rpx;
	padding: 40rpx 30rpx 8rpx;
	background: #fff;
	.search-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.info {
		font-size: $font-lg + 2rpx;
		color: #font-color-dark;
		line-height: 1.3;
		font-weight: bold;
	}
}

/* 历史记录 */
.history-content {
	padding: 15rpx;
	background-color: #ffffff;
	.history-item {
		padding: 4rpx 35rpx;
		background: #f1f1f1;
		border-radius: 50rpx;
		margin: 12rpx 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.more-item {
		display: flex;
		justify-content: center;
		position: relative;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
}

/* 推荐记录 */
.hot-content {
	display: flex;
	flex-wrap: wrap;
	padding: 15rpx;
	background-color: #ffffff;
	.hot-item {
		padding: 4rpx 35rpx;
		background: #f1f1f1;
		border-radius: 50rpx;
		margin: 12rpx 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
}

/* 横幅广告 */
.ad-banner {
	width: 100%;
	height: 210rpx;
	background: #fff;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
